<template>
  <div style="width: 100%">
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      label-width="100px"
      size="small"
    >
      <el-col :span="12">
        <el-form-item label="中文名称" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="英文名称" prop="nameEn">
          <el-input v-model="formData.nameEn"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="菜单类型" prop="alias">
          <el-radio-group v-model="formData.alias">
            <template v-for="{ value, label } in typeList">
              <el-radio-button :label="value">{{ label }}</el-radio-button>
            </template>
          </el-radio-group>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="英文描述">
          <el-input v-model="formData.describesEn"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="中文描述">
          <el-input v-model="formData.describes"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="dialogType === 'addChild' ? 12 : 24">
        <avue-form
          v-show="dialogType !== 'addChild'"
          :option="option"
          v-model="formData"
        ></avue-form>

        <el-form-item v-if="dialogType === 'addChild'" label="父路由">
          <el-input :disabled="true" v-model="row.name"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="路由" prop="path">
          <el-input v-model="formData.path"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="排序" prop="orders">
          <el-input-number
            style="width: 100%"
            :min="0"
            v-model="formData.orders"
          ></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="图标">
          <avue-input-icon
            v-model="formData.icon"
            :icon-list="iconList"
            :modal-append-to-body="false"
            placeholder="图标"
          ></avue-input-icon>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="formData.code"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="状态" prop="enableFlag">
          <el-radio-group size="mini" v-model="formData.enableFlag">
            <el-radio-button :label="1">启用</el-radio-button>
            <el-radio-button :label="0">禁用</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-form>

    <div class="md-component-btns">
      <el-button size="medium" type="primary" @click="save">保存</el-button>
      <el-button size="medium" @click="$emit('removeThisTabs')">取消</el-button>
    </div>
  </div>
</template>
<script>
import * as api from "@/api/menu/index";
import iconList from "@/config/iconList";

export default {
  name: "menuTemp",
  data() {
    return {
      iconList: iconList,
      visible: false,
      formData: {
        name: "",
        alias: "",
        nameEn: "",
        describesEn: "",
        describes: "",
        path: "",
        orders: "",
        icon: "",
        code: "",
        enableFlag: "1",
        parentId: 0,
      },

      rules: {
        name: [{ required: true, message: "请输入中文名称", trigger: "blur" }],
        alias: [{ required: true, message: "请选择菜单", trigger: "change" }],
        nameEn: [
          { required: true, message: "请输入英文名称", trigger: "blur" },
        ],
        path: [{ required: true, message: "请输入路由", trigger: "blur" }],
        orders: [{ required: true, message: "请输入排序", trigger: "blur" }],
        code: [{ required: true, message: "请输入权限标识", trigger: "blur" }],
        enableFlag: [
          { required: true, message: "请选择状态", trigger: "change" },
        ],
      },
      dialogType: "add",

      option: {
        submitBtn: false,
        emptyBtn: false,
        menuBtn: false,
        size: "medium",
        column: [
          {
            label: "父路由",
            prop: "parentId",
            type: "tree",
            dicUrl: `/api/user-api/mx-menu/tree`,
            // dicUrl: `/api/user-api/mx-menu/list?parentId=0`,
            props: {
              label: "name",
              value: "oid",
            },
            lazy: true,
            treeLoad: (node, resolve) => {
              const parentId = node.data.oid ? node.data.oid : 0 + "";
              // api.getMenuList({parentId}).then(res => {
              api.getMenuTree({ parentId }).then((res) => {
                resolve(res.data.data);
              });
            },
          },
        ],
      },

      row: {},

      typeList: [
        { label: "目录", value: "folder", category: 1 },
        { label: "菜单", value: "menu", category: 1 },
        { label: "标签页", value: "tag", category: 2 },
        { label: "按钮", value: "button", category: 3 },
        { label: "表格", value: "table", category: 4 },
        { label: "表单", value: "form", category: 5 },
        { label: "输入框", value: "input", category: 6 },
      ],
    };
  },
  methods: {
    save() {
      this.$refs["form"].validate((f) => {
        if (f) {
          if (["add", "edit"].includes(this.dialogType)) {
            Object.assign(this.formData);
          }

          let [typeValues] = this.typeList.filter((i) => i.value);
          if (typeValues) {
            this.formData.category = typeValues.category;
          } else {
            this.formData.category = 1;
          }

          let method = ["add", "addChild"].includes(this.dialogType)
            ? "add"
            : "update";

          if (this.dialogType === "addChild") {
            this.$set(this.formData, "parentId", this.row.oid);
          }

          api[method](this.formData).then(() => {
            this.visible = false;
            this.$message.success("保存成功");
            this.$emit("removeThisTabs");
            this.$emit("refresh");
          });
        }
      });
    },

    edit(row) {
      this.visible = true;
      this.dialogType = "edit";
      api.getDetail({ oid: row.oid }).then((res) => {
        Object.assign(this.formData, res.data.data);
        console.log("this.formDatathis.formData", this.formData);
      });
    },
    addChild(row) {
      this.row = row;
      this.visible = true;
      this.dialogType = "addChild";
      this.$set(this.formData, "parentId", row.oid);
    },

    open() {
      this.dialogType = "add";
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
  },
};
</script>
<style scoped>
</style>
